iT邦幫忙

2021 iThome 鐵人賽

DAY 16
1
Modern Web

這個網站也太嗨!30 個網頁動態提案系列 第 18

#15- 滾起來!頁面動態進度條(JS算網頁長度)

  • 分享至 

  • xImage
  •  

進度條一般都是搭配文章使用,
主要是告訴使用者目前閱讀到哪裡~
這是我自己非常喜歡的網頁設計,
讓你可以預設自己閱讀的進度,安排自己時間~(太長就快逃啊!)

看到了這個codepden的案例也搭配在網頁使用!
覺得體驗很好!主要就是告訴使用者這一頁已經滾到哪裡了,
當網頁配置太長時,搭配這樣的進度條,配合回到最上面的圖示,一舉數得!

先來看一下仿製的效果(搭配前天的進場效果一起!):
注意看右下角

這邊主要是利用SVG dashoffset來做進度條的感覺。

dashoffset會控制線的位置,之後再SVG也會再看到喔
另外也用JS去算滾動的距離/真文件長度

真文件長度 = 文件長度 - 視窗長度才是我們要的真正長度,不然滑到最下面還會多一塊!

pageHeight = document.body.clientHeight - window.innerHeight;
我們要算的比例 = window.scrollY / pageHeight

上code說明!

//HTML
<svg height="60" width="60" class="to-top">
    <circle class="" cx="30" cy="30" r="28" stroke="grey" stroke-width="3" />
    <circle class="progress" cx="30" cy="30" r="28" stroke="white" stroke-width="3" />
  <g class="arrow" id="arrow" data-name="Group 62" >
    <line class="line" id="Line_left" data-name="Line 13" x1="0" y1="18" x2="16" y2="0" fill="none" stroke="#ffffff" stroke-width="3"/>
    <line class="line" id="Line_right" data-name="Line 14" x1="14" y1="0" x2="30" y2="18" fill="none" stroke="#ffffff" stroke-width="3"/>
	</g>
</svg>
//SCSS
svg{
  position: fixed;
  bottom:5%;
  right: 5%;
  opacity: 0;
  z-index: 3;
  transition: 0.3s;
  cursor: pointer;
  
  .progress{
  --dashOffset: 300;//這有試了一下大概是300-100會讓線跑一圈
  stroke-dasharray: 300;
  stroke-dashoffset: var(--dashOffset); //這次想用變數設定看看!
  transform: rotate(-90deg);//讓線出來的
  transform-origin: center;
  }
  .arrow{
    transform: translate(25%, 30%);
    animation: arrow 2s infinite ease-in;
  }
  
}

@keyframes arrow{
  0%, 30%{
    transform: translate(25%, 30%);
    opacity: 1;
  }
  80%{
    transform: translate(25%, 12%);
    opacity: 0.3;
  }
  90%,100%{
    transform: translate(25%, 8%);
    opacity: 0;
  }
}
//JS
const pageHeight = document.body.clientHeight - window.innerHeight;
const circle = document.querySelector('.progress');
const svg = document.querySelector('svg');

document.addEventListener('scroll',function(){
  let scrollPos =  window.scrollY 
  
	//讓滾動的時候才跑出來
  if(!scrollPos) svg.style.opacity = 0;
  if(scrollPos) svg.style.opacity = 1;

	//滾動的距離去算圈圈的線要出來多少
  let darshOffset = 300 - scrollPos/pageHeight * (300 - 100);

	//設定變數,這樣如果有其他class也用到,就可以一起改了!
  circle.style.setProperty('--dashOffset', darshOffset);
	
	//當然也可以直接設定style,上下選一個就行~
  // circle.style.strokeDashoffset =  darshOffset;
})

以上!

今天的code在這裡

有任何問題/錯誤歡迎留言~


上一篇
#14-撒花~Button慶祝動態自己來!~ (JS)
下一篇
#16-載入炫起來!水滴狀Loading特效(SVG filter)
系列文
這個網站也太嗨!30 個網頁動態提案33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言